<template>
  <div id="About">
    <!--about me-->

    <!--about site-->
    <article>
      <h2>ABOUT SITE</h2>
      <p><code>前 端：</code><span class="code">Vue + Element</span></p>
      <p class="border">
        <code>服务器：</code
        ><a target="_blank" href="https://cloud.tencent.com/">腾讯云</a>
      </p>
    </article>

    <!--ABOUT COPYRIGHT-->

    <!--OTHER-->
    <article>
      <h2>OTHER</h2>
      <p>
      </p>
    </article>
  </div>
</template>

<script>
export default {
  name: "About",
};
</script>

<style lang="less" scoped>
#About {
  flex: 1;

  article {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 15px;
    box-shadow: 0 0 4px #ddd;
    padding: 25px 20px;
    background-color: #fff;
    font-family: Quicksand;
    border-radius: 15px;

    h2 {
      margin-bottom: 15px;
      font-size: 20px;
      letter-spacing: 3px;
      line-height: 24px;
      border-left: 5px solid #73b899;
      text-indent: 10px;
    }

    p {
      text-indent: 2em;
      color: #444;
      font-size: 14px;
      letter-spacing: 4px;
      line-height: 30px;
      &.border {
        border-bottom: 1px dotted rgb(170, 170, 170);
      }
    }

    code {
      text-indent: 0;
      display: inline-block;
      font-family: "Quicksand";
      font-size: 14px;
    }
    span.code {
      color: #bd4147;
      background-color: rgba(27, 31, 35, 0.05);
      font-weight: 700;
    }
    a {
      color: #409eff;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
